<template>
  <div class="form-input-area" style="position: relative">
    <Spin :withIcon="true" v-if="loading"></Spin>
    <div class="flx-row-s-s div-line">
      <div class="long-name">关键词</div>
      <Input
        v-model="keywords"
        style="width: 600px"
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 10 }"
        placeholder="每行一个关键词，最多10个，关键词中请勿包含域名后缀"
        wrap="hard"
      />
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">关键词匹配规则</div>
      <RadioGroup v-model="rule">
        <Radio
          class="radio-mg-r-20"
          v-for="(item, index) in ruleList"
          :key="index"
          :class="{ 'radio-mg-r-20': index < ruleList.length - 1 }"
          :label="index"
          >{{ item }}</Radio
        >
      </RadioGroup>
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">域名构成</div>
      <Cascader
        v-model="composition"
        :data="compositionList"
        :render-format="format"
        style="width: 200px"
        @on-change="cascaderChange"
      ></Cascader>
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">提醒方式</div>
      <CheckboxGroup v-model="searchMethod">
        <Checkbox
          class="radio-mg-r-20"
          v-for="(item, index) in searchMethodList"
          :key="index"
          :label="index + ''"
          >{{ item }}</Checkbox
        >
      </CheckboxGroup>
    </div>
    <div class="flx-row-s-c pub-m-l-145">
      <div class="user-strong-button submit-button-style" @click="checkForm">
        确认
      </div>
      <div
        class="user-normal-button submit-button-style"
        style="margin-left: 30px"
        v-if="setting"
        @click="cancel"
      >
        取消
      </div>
    </div>
  </div>
</template>

<script>
import { domainTypes } from "@/utils/publicData";
import { addRemind, editRemind } from "@/api/user";
export default {
  name: "VipReminderSetting",
  props: {
    setting: {
      default: false,
    },
    info: {
      default: null,
    },
  },
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (!newValue) return;
        this.keywords = newValue.keywords;
        this.rule = newValue.rule;
        this.composition = newValue.domainType;
        this.searchMethod = newValue.searchMethod;
        this.cascaderChange(newValue.domainType);
      },
    },
  },
  data() {
    return {
      loading: false,

      ruleList: ["完全匹配", "包含", "开头", "结尾"],
      compositionList: [],
      composition: [],
      searchMethodList: ["邮箱", "短信"],

      // 表单数据
      keywords: "",
      rule: "",
      domainType: null,
      searchMethod: [],
    };
  },
  created() {
    this.getDomainTypes();
  },
  methods: {
    async getDomainTypes() {
      let res = await domainTypes();
      this.compositionList = res;
    },
    format(labels) {
      const index = labels.length - 1;
      return labels[index];
    },
    // 级联选择器选择变化
    cascaderChange(value) {
      let temp = value[1].split("_");
      this.domainType = temp[1];
    },
    checkForm() {
      let temp = this.keywords.split("\n");
      let keywordsTemp = temp.filter((item) => {
        return !item.match(/^[ ]*$/);
      });
      if (keywordsTemp.length <= 0) {
        this.$Message.warning("请至少输入一个关键词！");
        return;
      }
      if (keywordsTemp.length > 10) {
        this.$Message.warning("输入的关键词超过10个，请删减！");
        return;
      }
      if (this.rule == null || this.rule === "") {
        this.$Message.warning("请选择关键词匹配规则！");
        return;
      }
      if (this.domainType == null || this.domainType == "") {
        this.$Message.warning("请选择域名构成！");
        return;
      }
      if (this.searchMethod.length <= 0) {
        this.$Message.warning("请选择提醒方式！");
        return;
      }
      this.submit(keywordsTemp);
    },
    async submit(keywordsTemp) {
      this.loading = true;
      let data = {
        keyword: keywordsTemp.toString(),
        mateType: this.rule,
        domainType: this.domainType,
        remindType: this.searchMethod.toString(),
      };
      if (!this.setting) {
        let res = await addRemind(data);
        if (res.code == 200) {
          this.$Message.success("添加成功！");
          sessionStorage.setItem("refresh-remark-list", "1");
          this.$router.replace("/user/reminder");
        }
      } else {
        data.id = this.info.id;
        let res = await editRemind(data);
        if (res.code == 200) {
          this.$Message.success("编辑成功！");
          this.$emit("success");
        }
      }
      this.loading = false;
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>